<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  对象的深浅拷贝

  1.为什么需要拷贝

  2.深拷贝
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script>
    /**
     * 对象的赋值是引用 修改一个对象会引起
     * 另一个对象的修改，所以需要对象的拷贝
     * */
    // var a = 1
    // var b = a
    // a = 3
    // console.log(b);

    // var a = {
    //   a: 1
    // }
    // var b = a
    // a.a = 3
    // console.log(b.a);

    // 浅拷贝
    /* 
        var a = {
          a: 1,
          b: 2
        }
        function simpleClone(obj) {
          var cloneObj = {}
          
          // es3写法
          // for (let i in obj) {
          //   cloneObj[i] = obj[i]
          // }

          // es6写法
          // for (let key of Object.keys(obj)) {
          //   cloneObj[key] = obj[key]
          // }
          // for (let [key, value] of Object.entries(obj)) {
          //   cloneObj[key] = value
          // }

          // es5写法
          Object.getOwnPropertyNames(obj).forEach(function(key) {
            let desc = Object.getOwnPropertyDescriptor(obj, key)
            Object.defineProperty(cloneObj, key, desc)
          })
      
          return cloneObj
        }
        console.log(simpleClone(a));
     */

    // 深拷贝
    var obj = {
      a: 1,
      b: {
        c: 3,
        d: {
          e: 5,
          f: [1, 2, 3, 4, 5]
        }
      }
    }

    // 原生JS实现深拷贝
    /* 
        function deepClone(obj, cloneObj) {
          var cloneObj = cloneObj || {}

          for (let i in obj) {
            if (typeof obj[i] === 'object' && obj[i] !== null) {
              // cloneObj[i] = Array.isArray(obj[i]) ? []:{}
              // cloneObj[i] = obj[i] instanceof Array ? []: {}
              cloneObj[i] = Object.prototype.toString.call(obj[i]) === '[object Array]' ? [] : {}

              deepClone(obj[i], cloneObj[i])
            } else {
              cloneObj[i] = obj[i]
            }
          }

          return cloneObj
        }
     */

    //  JSON.parse JSON.stringify实现深拷贝
    /*     
        function deepClone(obj) {
          return JSON.parse(JSON.stringify(obj))
        }
     */

    //  JQuery方式
    function deepClone(obj) {
      return $.extend(true, {}, obj)
    }

    var obj1 = deepClone(obj)

    obj.b.d.e = 10
    obj.b.d.f.push(6)
    console.log(obj1);

    // console.log(typeof [1,2,3]);
  </script>
</body>

</html>